<template>
	<scroll-view class="handlescroll" :scroll-into-view="loadingType" scroll-y="true" @scrolltolower="scrollUp">
		<!-- 轮播区域 -->
		<view class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item in swiperList" :key="item.id">
					<image :src="item.thumb" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 列表区域 -->
		<view class="album-list">
			<view class="list-item" @click="To_detail(item.id)" v-for="item in album" :key="item.id">
				<view class="pic">
					<image :src="item.lcover" mode="aspectFill"></image>
				</view>
				<view class="text">
					<view class="item-name">{{item.name}}</view>
					<view class="item-message">{{item.desc}}</view>
					<view class="wrap">
						<view class="item-btn">
							<text class="iconfont icon-icon-test"></text>
							<text>关注</text>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		</view>
	</scroll-view>
</template>

<script>
	import {bannerList} from "@/api/home.js"
	export default{
		data(){
			return{
				parms:{
					limit:30,
					order:"new",
					skip:0
				},
				// 轮播数组
				swiperList:[],
				// 列表数组
				album:[],
				// 判断是否有分页
				hasmore:true,
				status: 'loading',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			}
		},
		mounted() {
			// 标题修改
			uni.setNavigationBarTitle({
				title:"专辑"
			})
			this.loadData()
		},
		methods:{
			// 初始数据
			loadData(){
				const {limit,order,skip}=this.parms
				bannerList({limit,order,skip}).then(res=>{
					console.log(res)
					this.swiperList=res.res.banner
					if(this.hasmore){
						if(res.res.album.length>0){
							this.status="loading"
							this.album=[...this.album,...res.res.album]
						}else{
							this.status="nomore"
						}
					}
				})
			},
			// 下拉加载事件
			scrollUp(){
				console.log(123)
				this.skip+=this.limit
				this.loadData()
			},
			// 去专辑详情
			To_detail(Id){
				console.log(Id)
				uni.navigateTo({
					url:"/pages/album/index?id="+Id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.handlescroll{
		height: calc(100vh - 70rpx);
	}
	swiper{
		width: 750rpx;
		height: calc(750rpx/2.3);
		image{
			width: 100%;
			height: 100%;
		}
		
	}
	.album-list{
		padding: 0 20rpx;
	}
	.list-item:nth-child(1){
		padding-top: 20rpx;
	}
	.list-item{
		display: flex;
		padding: 10rpx 0;
		border-bottom: 1rpx solid #ddd;
		.pic{
			flex: 3;
			image{
				width:200rpx;
				height:200rpx;
			}
		}
		.text{
			flex: 8;
			padding-left: 20rpx;
		}
	}
	.text{
		.item-name{
			font-weight: 600;
			font-size: 32rpx;
		}
		.item-message{
			color: #999;
			margin: 10rpx 0;
			-webkit-line-clamp: 1;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.item-btn{
			display: flex;
			align-items: center;
			width: 120rpx;
			height: 60rpx;
			border: 1rpx solid red;
			justify-content: center;
		}
	}
	.wrap{
		display: flex;
		justify-content: flex-end;
		margin: 25rpx 0;
	}
	
</style>
